<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 科目管理
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <!--                <el-select v-model="query.address" placeholder="地址" class="handle-select mr10">-->
        <!--                    <el-option key="1" label="广东省" value="广东省"></el-option>-->
        <!--                    <el-option key="2" label="湖南省" value="湖南省"></el-option>-->
        <!--                </el-select>-->
        <el-input v-model="subjectSearch" placeholder="课程名称" class="handle-input mr10"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        <el-button type="primary" @click="handleAdd">新增科目</el-button>
      </div>
      <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
        <!--                <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>-->
        <!--        <el-table-column prop="name" label="用户名"></el-table-column>-->
        <el-table-column label="课程名称">
          <template #default="scope">{{ scope.row.subjectName }}</template>
        </el-table-column>
        <el-table-column label="授课教师" align="center">
          <template #default="scope">
            {{ scope.row.subjectLeader }}
          </template>
        </el-table-column>
        <!--        <el-table-column label="上课地点">-->
        <!--          <template #default="scope">{{ scope.row.examIntroduce }}</template>-->
        <!--        </el-table-column>-->
        <el-table-column label="授课学院">
          <template #default="scope">{{ scope.row.subjectCollege }}</template>
        </el-table-column>
        <el-table-column label="上课地点">
          <template #default="scope">{{ scope.row.subjectDemand }}</template>
        </el-table-column>
        <el-table-column label="上课时间">
          <template #default="scope">{{ scope.row.createDate }}</template>
        </el-table-column>
        <el-table-column prop="date" label="操作" width="300px">
          <template #default="scope">
            <el-button type="primary" @click="open(scope.row)" style="width: 75px">编辑</el-button>
            <el-button type="primary" @click="deleteSubject(scope.row)" style="width: 75px">删除</el-button>
            <el-button type="primary" @click="open2(scope.row)" style="width: 75px">学生</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--      <div class="pagination">-->
      <!--        <el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"-->
      <!--                       :page-size="query.pageSize" :total="pageTotal"-->
      <!--                       @current-change="handlePageChange"></el-pagination>-->
      <!--      </div>-->
    </div>

    <!-- 编辑弹出框 -->
    <el-dialog title="课程信息编辑" v-model="editVisible" width="50%">
      <el-form label-width="70px">
        <el-form-item label="课程名称" disabled="true" required>
          <el-input v-model="subjectInfo.subjectName"></el-input>
        </el-form-item>
        <el-form-item label="授课教师">

          <!--          <el-input v-model="examInfo.examTeacher"></el-input>-->
          <el-select v-model="subjectInfo.subjectLeader" placeholder="请选择授课教师" aria-required="true">
            <el-option v-for="item in teachers"
                       :key="item.teacherNum"
                       :label="item.teacherName"
                       :value="item.teacherNum">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上课时间">
          <!--          <el-input v-model="examInfo.examDate"></el-input>-->
          <el-date-picker
              v-model="subjectInfo.createDate"
              type="datetime"
              placeholder="选择日期时间" aria-required="true">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="上课地点" required>
          <el-select v-model="site" placeholder="请选择教学楼" aria-required="true" @change="queryClassrooms">
            <el-option v-for="item in sites"
                       :value="item.name">
            </el-option>
          </el-select>
          <el-select v-model="subjectInfo.subjectDemand" placeholder="请选择上课地点" aria-required="true">
            <el-option v-for="item in examClasses"
                       :value="item.roomNum">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer #default="scope">
                <span class="dialog-footer">
                    <el-button @click="editVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveEdit()">确 定</el-button>
                </span>
      </template>
    </el-dialog>

    <el-dialog title="考试人员编辑" v-model="studentVisible" width="50%">
      <el-table
          :data="students"
          style="width: 100%">
        <el-table-column
            prop="studentNum"
            label="学号"
            width="180">
        </el-table-column>
        <el-table-column
            prop="studentName"
            label="姓名"
            width="180">
        </el-table-column>
        <el-table-column width="200px"
                         label="操作">
          <template #default="scope">
            <el-button @click="handleClick2(scope.row)">删除</el-button>
          </template>

        </el-table-column>
      </el-table>
      <el-button @click="addStuToSubject" style="background-color: #f5dab1">新增</el-button>
    </el-dialog>

    <el-dialog title="考试人员新增" v-model="studentVisible2" width="50%">
      <el-table
          :data="unStudents"
          style="width: 100%">
        <el-table-column
            prop="studentNum"
            label="学号"
            width="180">
        </el-table-column>
        <el-table-column
            prop="studentName"
            label="姓名"
            width="180">
        </el-table-column>
        <el-table-column width="200px"
                         label="操作">
          <template #default="scope">
            <el-button @click="handleClick(scope.row)">添加</el-button>
          </template>

        </el-table-column>
      </el-table>
<!--      <el-button @click="addStuToSubject">新增</el-button>-->
    </el-dialog>

    <el-dialog title="课程信息编辑" v-model="addSubjectVisible" width="50%">
      <el-form label-width="70px">
        <el-form-item label="课程名称" disabled="true" required>
          <el-input v-model="subjectInfo.subjectName"></el-input>
        </el-form-item>
        <el-form-item label="授课教师">
          <el-select v-model="subjectInfo.subjectLeader" placeholder="请选择授课教师" aria-required="true">
            <el-option v-for="item in teachers"
                       :key="item.teacherNum"
                       :label="item.teacherName"
                       :value="item.teacherNum">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上课时间">
          <el-time-select
              v-model="subjectInfo.createDate"
              type="datetime"
              placeholder="选择日期时间"
              :picker-options="{
    start: '08:30',
    step: '00:15',
    end: '16:30'
  }"
              aria-required="true">
          </el-time-select>
        </el-form-item>
        <el-form-item label="上课地点" required>
          <el-select v-model="site" placeholder="请选择教学楼" aria-required="true" @change="queryClassrooms">
            <el-option v-for="item in sites"
                       :value="item.name">
            </el-option>
          </el-select>
          <el-select v-model="subjectInfo.subjectDemand" placeholder="请选择考试地点" aria-required="true">
            <el-option v-for="item in examClasses"
                       :value="item.roomNum">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer #default="scope">
                <span class="dialog-footer">
                    <el-button @click="editVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveEdit()">确 定</el-button>
                </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  addOrUpdateSubject,
  queryStudentsByExamId,
  selectAllClassRoom,
  selectAllTeachers,
  selectMySubjectByParam,
  deleteSubject,
  selectUnStudent,
  addStudentByExamId,
  deleteStudentByExamId
} from "../api";

export default {
  name: "SubjectManagement",
  data() {
    return {
      subjectSearch: '',
      tableData: [
        {
          id: 0,
          subjectName: '',
          subjectLeader: '',
          subjectCollege: '',
        }
      ],
      examInfo: {
        examSubjectId: 0,
        examSubject: '',
        examIntroduce: '',
        examPosition: '',
        examTeacher: '',
        examTime: '',
        examDate: '',
        examStatus: '未开始',
        examType: '闭卷',
      },
      subjectInfo:{
        id:0,
        subjectName:'',
        subjectCollege:'',
        subjectLeader:'',
        createDate:'',
        subjectDemand:'',
      },
      editVisible: false,
      studentVisible: false,
      options: [
        {
          value: '60分钟',
          label: '60分钟'
        }, {
          value: '90分钟',
          label: '90分钟'
        }, {
          value: '100分钟',
          label: '100分钟'
        }, {
          value: '120分钟',
          label: '120分钟'
        }],
      teachers: [],
      examConfig: {
        studentId: '',
        subjectId: '',
        learnStatus: '',
      },
      students: [],
      unStudents:[],
      typeOptions: [
        {
          value: '闭卷',
          label: '闭卷',
        }, {
          value: '开卷',
          label: '开卷',
        }, {
          value: '论文',
          label: '论文',
        }
      ],
      examClasses:[
        {
          id:0,
          parentBuilding: '',
          roomNum: '',
          status: '',
        }
      ],
      site:'',
      sites: [
        {
          name: '第一教学楼',
        }, {
          name: '第二教学楼',
        }, {
          name: '实验室',
        }
      ],
      studentVisible2:false,
      addSubjectVisible:false,
    }
  },
  methods: {
    handleSearch() {
      selectMySubjectByParam({subjectName: this.subjectSearch}).then(res => {
        if (res.code === '200') {
          this.tableData = res.data;
          this.$message.success("查询成功");
        } else {
          this.$message.error(res.message);
        }
      })
    },
    saveEdit() {
      if (this.subjectInfo.subjectDemand === '') {
        this.$message.warning("上课地点不能为空");
        return;
      }
      if (this.subjectInfo.subjectLeader === '') {
        this.$message.warning("上课教师不能为空");
        return;
      }
      if (this.subjectInfo.createDate === '') {
        this.$message.warning("上课时间不能为空");
        return;
      }
      if (this.subjectInfo.subjectName === '') {
        this.$message.warning("科目名称不能为空");
        return;
      }
      this.subjectInfo.subjectDemand = this.site + this.subjectInfo.subjectDemand;
      // this.examInfo.examSubjectId = row.examSubjectId;
      addOrUpdateSubject(this.subjectInfo).then(res => {
        if (res.code === '200') {
          this.$message.success("修改成功");
          this.editVisible = false;
        } else {
          this.$message(res.message);
        }
        this.queryMySubject();
        this.editVisible = false;
        this.addSubjectVisible = false;
      })
    },
    open(row) {
      this.subjectInfo.id = row.id;
      // this.examInfo.examSubject = row.subjectName;
      this.subjectInfo = row;
      let s = this.subjectInfo.subjectDemand.substr(1,1);
      if('一' === s){
        this.site = '第一教学楼';
        this.subjectInfo.subjectDemand = this.subjectInfo.subjectDemand.substr(5,4);
      }
      if('二' === s){
        this.site = '第二教学楼';
        this.subjectInfo.subjectDemand = this.subjectInfo.subjectDemand.substr(5,4);
      }
      if('验' === s){
        this.site = '实验室';
        this.subjectInfo.subjectDemand = this.subjectInfo.subjectDemand.substr(3,4);
      }
      this.queryClassrooms();
      this.editVisible = true;
    },
    open2(row) {
      this.examConfig.subjectId = row.id;
      this.queryStudents();
      selectUnStudent({subjectId:row.id}).then(res => {
        if(res.code === '200'){
          this.unStudents = res.data;
        }
      })
      this.studentVisible = true;
    },
    queryMySubject() {
      selectMySubjectByParam().then(res => {
        if (res.code === '200') {
          this.tableData = res.data;
        } else {
          this.$message.error(res.message);
        }
      })
    },
    queryTeachers() {
      selectAllTeachers().then(res => {
        if (res.code === '200') {
          this.teachers = res.data;
        }
      })
    },
    queryStudents() {
      queryStudentsByExamId({examId: this.examConfig.subjectId}).then(res => {
        if (res.code === '200') {
          this.students = res.data;
        }
      })
    },
    handleClick(row) {
      addStudentByExamId({subjectId:this.subjectInfo.id,stuId:row.studentNum}).then(res => {
        if(res.code === '200'){
          this.$message("成功");
        }
      })
    },
    handleClick2(row) {
      deleteStudentByExamId({subjectId:this.subjectInfo.id,stuId:row.studentNum}).then(res => {
        if(res.code === '200'){
          this.$message("成功");
        }
      })
    },
    queryClassrooms(){
      selectAllClassRoom({status:'2',site:this.site}).then(res => {
        if(res.code === '200'){
          this.examClasses = res.data;
        }else{
          this.examClasses = null;
        }
      })
    },
    handleAdd(){
      this.addSubjectVisible = true;
    },
    addStuToSubject(){
      this.studentVisible = false;
      addStudentByExamId({subjectId:this.subjectInfo.id,stuId:row.studentNum}).then(res => {
        if(res.code === '200'){
          this.$message("成功");
        }
      })
      this.studentVisible2 =selectUnStudent()
    },
    deleteSubject(row){
      deleteSubject({subjectId:row.id}).then(res => {
        if(res.code === '200'){
          this.$message('成功');
        }else {
          this.$message('数据异常');
        }
        this.queryMySubject();
      })
    },
  },
  mounted() {
    this.queryMySubject();
    this.queryTeachers();
  }
}
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>